<template>
	<view class="page-body">
    <view class="user">
      <image src="../../static/icons/user.png" @tap="goUserInfo" mode="widthFix"></image>
      <view>
        <view class="nike-name" @tap="goUserInfo">游客1007</view>
        <view class="user-desc">从哪里来，到哪里去...</view>
      </view>
    </view>
    <view style="height: 40rpx;"></view>
    <my-list icon="/static/icons/user.png">历史题集</my-list>
    <view style="height: 30rpx;"></view>
    <my-list icon="/static/icons/user.png">用户信息</my-list>
    <view @tap="clearToken">
      <my-list icon="/static/icons/user.png">清楚token</my-list>
    </view>
    <view  @tap="seeToken">
      <my-list icon="/static/icons/user.png">查看token</my-list>
    </view>
    <view style="height: 30rpx;"></view>
    <view  @tap="openLogin">
      <my-list icon="/static/icons/user.png">注册</my-list>
    </view>
    <!-- 注册弹窗 -->
    <wyb-popup ref="popup" type="center" height="540" width="500" radius="6" :showCloseIcon="true">
        <view class="regist">
          <view>
            <text @tap="popupSwitch('login')" :class="{active : popupType == 'login'}">登录</text> |
            <text @tap="popupSwitch('regist')" :class="{active :popupType == 'regist'}">注册</text>
          </view>
          <input type="text" v-model="regFrom.name" placeholder="请输入用户名"/>
          <input type="text" v-model="regFrom.pass" password placeholder="请输入密码"/>
          <input v-if="this.popupType == 'regist'" type="text" v-model="regFrom.pass_confirm" password placeholder="请再次输入密码"/>
          <button @tap="reg" type="default">确定</button>
        </view>
    </wyb-popup>
	</view>
</template>

<script>
import myList from '@/components/my-list.vue'
import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
import { regist } from '../../apis.js'
import Tools from '@/common/tools.js'
export default {
  components:{
    myList,
    wybPopup
  },
  onLoad() {
    let token = uni.getStorageSync('token')
    if( Tools.isEmpty(token) ){
      // 打开登录页
      uni.switchTab({
      })
    }
    // 获取用户信息
    
  },
  
  data() {
    return {
      popupType: 'login',
      regFrom: {
        name: '',
        pass: '',
        pass_confirm: ''
      }
    }
  },
  methods: {
    goUserInfo(){
      uni.navigateTo({
        url: '../user-info/user-info'
      })
    },
    openLogin(){
      this.$refs.popup.show();
    },
    reg(){
      console.log(this.regFrom)
      // TODO: 前端验证
      regist(this.regFrom).then( res => {
        let {msg, errCode, data} = res.data
        if(errCode === 0){
          // 成功 则存下token
          uni.setStorageSync('token', data)
          // 请求当页数据
        }
      },
      err => {
        console.log(err)
      }
      )
    },
    seeToken() {
      let token = uni.getStorageSync('token')
      if( Tools.isEmpty(token)){
        console.log('noLogin');
      }
      console.log(token)
    },
    clearToken() {
      uni.clearStorageSync()
    },
    popupSwitch(type){
      this.popupType = type
    }
  }
  
}
</script>

<style>
.page-body{
  background-color: #f4f4f4;
  height: 100%;
}
.user{
  display: flex;
  background-color: #fff;
  padding: 20rpx 30rpx;
}
.user>image{
  width: 150rpx;
  height: 150rpx;
  margin-right: 20rpx;
}
.user>view {
  flex: 1;
}
.nike-name {
  font-size: 40rpx;
  font-weight: 600;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
}
.user-desc{
  font-size: 24rpx;
  color: #666666;
}
.regist{
  padding: 40rpx;
}
.regist>input{
  width: auto;
  height: 70rpx;
  margin-top: 20rpx;
  padding: 0 10rpx;
  border: solid 1rpx #555;
}
.regist>button{
  margin-top: 30rpx;
}
.regist>view:first-child{
  font-size: 30rpx;
  color: #333333;
}
.regist .active {
  color: red;
  font-size: 36rpx;
}
</style>
